<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>上期所多档行情</title>

	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<script src="//cdn.bootcss.com/socket.io/1.7.2/socket.io.js"></script>

	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css">
	<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
	<script src="https://code.ciphertrick.com/demo/jquerysession/js/jquerysession.js"></script>
	<!--输入框自动完成-->
	<script src="//cdn.bootcss.com/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
	<!--spinner数字输入-->
	<script src="//cdn.bootcss.com/bootstrap-touchspin/3.1.2/jquery.bootstrap-touchspin.min.js"></script>
</head>
<body onunload="disconnect()">
	<div class="container">
		<div>
			<input class="center-block" type="text" id="insts" data-provide="typeahead">
		</div>
		<table class="table table-bordered table-condensed" id="report">
			<!--<thead>-->
				<!--<tr>-->
					<!--<td>价格</td>-->
					<!--<td>数量</td>-->
				<!--</tr>-->
			<!--</thead>-->
			<tbody>
				<tr bgcolor="#6495ed"><td id="a1" align="right"></td><td id="av1" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a2" align="right"></td><td id="av2" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a3" align="right"></td><td id="av3" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a4" align="right"></td><td id="av4" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a5" align="right"></td><td id="av5" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a6" align="right"></td><td id="av6" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a7" align="right"></td><td id="av7" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a8" align="right"></td><td id="av8" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a9" align="right"></td><td id="av9" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a10" align="right"></td><td id="av10" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a11" align="right"></td><td id="av11" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a12" align="right"></td><td id="av12" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a13" align="right"></td><td id="av13" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a14" align="right"></td><td id="av14" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a15" align="right"></td><td id="av15" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a16" align="right"></td><td id="av16" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a17" align="right"></td><td id="av17" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a18" align="right"></td><td id="av18" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a19" align="right"></td><td id="av19" align="left"></td></tr>
				<tr bgcolor="#6495ed"><td id="a20" align="right"></td><td id="av20" align="left"></td></tr>

				<tr bgcolor="#db7093"><td id="b1" align="right"></td><td id="bv1" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b2" align="right"></td><td id="bv2" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b3" align="right"></td><td id="bv3" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b4" align="right"></td><td id="bv4" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b5" align="right"></td><td id="bv5" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b6" align="right"></td><td id="bv6" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b7" align="right"></td><td id="bv7" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b8" align="right"></td><td id="bv8" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b9" align="right"></td><td id="bv9" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b10" align="right"></td><td id="bv10" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b11" align="right"></td><td id="bv11" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b12" align="right"></td><td id="bv12" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b13" align="right"></td><td id="bv13" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b14" align="right"></td><td id="bv14" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b15" align="right"></td><td id="bv15" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b16" align="right"></td><td id="bv16" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b17" align="right"></td><td id="bv17" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b18" align="right"></td><td id="bv18" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b19" align="right"></td><td id="bv19" align="left"></td></tr>
				<tr bgcolor="#db7093"><td id="b20" align="right"></td><td id="bv20" align="left"></td></tr>
			</tbody>
		</table>
	</div>

	<script type="text/javascript" charset="utf-8">
		var sub_inst = "";
		var shfe = null;
		if(shfe == null)
			shfe = io.connect('http://192.168.105.203:5000/shfe_multi', {'reconnect':true, 'auto connect':true,'force new connection':true, 'multiplex': false});
		 //此处的ip影响访问

		shfe.on('connect', function () {
			shfe.emit('getinsts','');
		});

		shfe.on('disconnect', function(){
			//alert('disconnect');
			//socket.socket.reconnect();
		});

		shfe.on('rtninsts', function (insts) {
			$("#insts").empty();
			var $input = $('#insts');
			$input.typeahead({source: insts.sort(), autoSelect: true});
			$input.change(function() {
				var current = $input.typeahead("getActive");
				if (current) {
					// Some item from your model is active!
					if (current.name == $input.val()) {
						// This means the exact match is found. Use toLowerCase() if you want case insensitive match.
						if(sub_inst != ''){
							shfe.emit('unsub_instrument', sub_inst);
						}
						sub_inst = current.name;
						shfe.emit('sub_instrument', sub_inst);
					} else {
						// This means it is only a partial match, you can either add a new item
						// or take the active if you don't want new items
					}
				} else {
					// Nothing is active so it is a new value (or maybe empty value)
				}
			});
		});

		shfe.on('rsp_data', function (msg) {
			var data = msg['data'];
			//if(document.getElementById('insts').value = data['instrument']) return;

			var as = data['askprice'];
			var avs = data['askvolume'];
			var bs = data['bidprice'];
			var bvs = data['bidvolume'];

			for(var i=0; i<20; i++) {
				document.getElementById('a' + (20-i)).innerHTML = as[i].toFixed(2);
			}
			for(var i=0; i<20; i++) {
				document.getElementById('av' + (20-i)).innerHTML = avs[i];
			}
			for(var i=0; i<20; i++) {
				document.getElementById('b' + (i+1)).innerHTML = bs[i].toFixed(2);
			}
			for(var i=0; i<20; i++) {
				document.getElementById('bv' + (i+1)).innerHTML = bvs[i];
			}
		});

		function disconnect() {
			if(shfe != null){
				shfe.emit('unsub_instrument', sub_inst);
				shfe.disconnect();
			}
		}

	</script>
</body>
</html>